<template>
  <div class="draw-box">
    <div class="meta2d" ref="meta2dCanvas"></div>
  </div>
</template>

<script setup lang="ts">
import { Meta2d } from '@meta2d/core';
import { formPens } from "@meta2d/form-diagram";
import textData from './shwprocess.json'

const router = useRouter();
const meta2dCanvas = ref(null)
let meta2d:Meta2d

onMounted(()=>{
  let textDataStr = JSON.stringify(textData);
  textDataStr = textDataStr.replaceAll(",\"image\":\"",",\"image\":\"");
  let options= {
    //disableScale : true,
    //disableTranslate: true,
  }
  meta2d = new Meta2d(meta2dCanvas.value as HTMLElement,options);

  meta2d.registerCanvasDraw(formPens());

  meta2d.on("jdcDetailInfo",(e)=>{
    router.push({ path: '/scale/'+e.params })
  });

  meta2d.on("sieveDetailInfo",(e)=>{
    router.push({ path: '/sieves/'+e.params })
  });
  meta2d.open(JSON.parse(textDataStr));

  meta2d.fitView();
  meta2d.centerView();
  meta2d.connectWebsocket("ws://"+location.host+ import.meta.env.VITE_APP_BASE_API +"/webSocket/compositeScreen" );
  meta2d.lock(1);
})

onBeforeUnmount(()=>{
  meta2d.destroy()
})



</script>

<style scoped lang="scss">
.draw-box{
  width: calc(100%);
  height: calc(100%);
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  .meta2d {
    width: 100%;
    height: 100%;
  }
}
</style>